<template>
  <div class="joinus">
    <div class="content">

      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="v,i in lists"
          :name="i"
          :key="i"
        >
          <template slot="title">
            <div class="list-name">
              {{v.name}}
              <p>
                {{v.loaction}}
              </p>
            </div>
          </template>
          <div class="list-content">
            <h5>岗位职责</h5>
            <ol>
              <li
                v-for="value,index in v.content.duty"
                :key="index"
              >
                {{value}}
              </li>
            </ol>
            <h5>岗位需求</h5>
            <ol>
              <li
                v-for="value,index in v.content.need"
                :key="index"
              >
                {{value}}
              </li>
            </ol>
          </div>

        </van-collapse-item>
      </van-collapse>

    </div>
  </div>
</template>
<script>
import { joinFindAll } from '@/api/index'
export default {
  name: "join",
  data() {
    return {
      activeNames: ["1"],
      lists: [],
    };
  },
  mounted() {
    this.getPostInformation()
  },
  methods: {
    // 获取职位信息
    async getPostInformation() {
      try {
        const res = await joinFindAll()
        this.lists = res
      } catch(err) {
        console.log(err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/styles/mixin.scss";

.joinus {
  height: 100%;
  background-color: #eeeeee;
  .content {
    padding: 15px;
  }

  .list-name {
    font-size: 14px;
    color: #3f4650;

    p {
      margin-top: 5px;
      font-size: 11px;
    }
  }

  .list-content {
    background-color: #fff;
    padding: 0 15px 15px;

    h5 {
      padding: 15px 0;
      font-size: 15px;
      font-weight: bold;
      color: #3f4650;
    }

    ol {
      list-style-type: none;
      counter-reset: sectioncounter;
      margin-top: 14px;

      li {
        font-size: 11px;
        list-style-position: outside;
      }

      li:before {
        content: counter(sectioncounter) "、";
        counter-increment: sectioncounter;
      }
    }
  }

  .list-active {
    background-color: #4278bc;

    .list-name {
      color: #fff;
    }

    .mail {
      color: #4278bc;
      background-color: #fff;
    }
  }
}
</style>
<style lang="scss">
.app-wrapper {
  background-color: #eeeeee;
}
.van-cell {
  align-items: center;
}

/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .van-cell {
    padding: 20px 15px;
  }
}
</style>
